<template>
  <div class="add">
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFormRules"
      label-width="80px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          v-model="addForm.title"
          placeholder="请输入文章标题（必填）"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章摘要" prop="summary">
        <el-input
          v-model="addForm.summary"
          placeholder="轻输入文章摘要"
        ></el-input>
      </el-form-item>
      <el-form-item label="封面连接" prop="cover">
        <el-input
          v-model="addForm.cover"
          placeholder="请输入封面连接"
        ></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="textContent">
        <mavon-editor
          ref="md"
          v-model="addForm.textContent"
          previewBackground="#fff"
        />
      </el-form-item>

      <el-form-item label="文章标签" prop="select">
        <el-select
          v-model="addForm.select"
          multiple
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in allTagList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文章类型" prop="type" style="display: inline-block">
        <el-select v-model="addForm.type" placeholder="请选择">
          <el-option
            v-for="item in articleType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="文章分类"
        prop="categoryId"
        style="display: inline-block; margin-left: 20px"
      >
        <el-select v-model="addForm.categoryId" placeholder="请选择">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="warning" @click="onSubmit(1)">保存草稿</el-button>
        <el-button type="primary" @click="onSubmit(2)">发布文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { category, tag, article } from '../../../api/api'

export default {
  name: 'abc',
  props: ['path'],

  created() {},

  mounted() {
    this.getCategory()
    this.getTag()
  },

  components: {},

  data() {
    return {
      //添加表单
      addForm: {
        title: '', //标题
        summary: '', //摘要
        cover: '', //封面url

        content: '',
        textContent: '',
        'test-editor-markdown-doc': '',
        'test-editor-html-code': '',

        select: [], //标签id
        tagList: [], //标签对象
        type: 1, //文章类型
        categoryId: null, //文章分类

        'table-align': '_default',
        published: null //发布和草稿  true 发布，false 草稿
      },
      //表单验证规则
      addFormRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],

        select: [{ required: true, message: '请选择标签', trigger: 'change' }],
        type: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择文章分类', trigger: 'change' }
        ]
      },

      //标签列表
      allTagList: [
        {
          id: 12,
          name: 'JavaEE',
          color: '#D5F5E3',
          createTime: '2020-06-14 19:39:08',
          updateTime: '2020-06-14 19:39:08'
        },
        {
          id: 13,
          name: 'Spring',
          color: '#E8F8F5',
          createTime: '2020-06-14 19:40:03',
          updateTime: '2020-06-15 08:55:32'
        },
        {
          id: 14,
          name: 'SpringMVC',
          color: '#82E0AA',
          createTime: '2020-06-15 08:54:38',
          updateTime: '2020-06-15 08:55:57'
        },
        {
          id: 15,
          name: 'Mybatis',
          color: '#A3E4D7',
          createTime: '2020-06-15 08:54:38',
          updateTime: '2020-06-15 08:57:10'
        },
        {
          id: 16,
          name: 'Redis',
          color: '#FEF9E7',
          createTime: '2020-06-15 08:54:38',
          updateTime: '2020-06-15 08:57:22'
        },
        {
          id: 17,
          name: '设计模式',
          color: '#F9E79F',
          createTime: '2020-06-15 10:45:55',
          updateTime: '2020-06-15 10:51:50'
        },
        {
          id: 25,
          name: 'SpringBoot',
          color: '#BEEDC7',
          createTime: '2020-06-15 11:56:47',
          updateTime: '2020-06-15 12:03:19'
        },
        {
          id: 26,
          name: 'SpringSecurity',
          color: '#00CCFF',
          createTime: '2020-06-15 11:56:47',
          updateTime: '2020-06-15 12:04:57'
        },
        {
          id: 27,
          name: 'Vue',
          color: '#D5F5E3',
          createTime: '2020-06-15 12:34:05',
          updateTime: '2020-06-15 12:34:05'
        },
        {
          id: 28,
          name: 'Docker',
          color: '#00CCFF',
          createTime: '2020-08-24 04:48:37',
          updateTime: '2020-09-03 12:25:34'
        },
        {
          id: 29,
          name: 'Linux',
          color: '#F8C471',
          createTime: '2020-08-24 09:37:04',
          updateTime: '2020-08-24 09:37:04'
        },
        {
          id: 30,
          name: 'Java',
          color: '#82E0AA',
          createTime: '2020-09-03 12:26:28',
          updateTime: '2020-09-03 12:26:28'
        },
        {
          id: 31,
          name: 'Other',
          color: '#82E0AA',
          createTime: '2020-09-05 17:25:11',
          updateTime: '2020-09-05 17:25:11'
        },
        {
          id: 32,
          name: 'Markdown',
          color: '#A3E4D7',
          createTime: '2020-09-13 22:16:05',
          updateTime: '2020-09-13 22:16:05'
        },
        {
          id: 33,
          name: 'SQL',
          color: '#82E0AA',
          createTime: '2020-11-17 13:27:35',
          updateTime: '2020-11-17 13:27:35'
        },
        {
          id: 34,
          name: '算法',
          color: '#F8C471',
          createTime: '2021-01-04 15:01:08',
          updateTime: '2021-01-04 15:01:08'
        },
        {
          id: 35,
          name: 'Mysql',
          color: '#E8F8F5',
          createTime: '2021-03-08 16:19:10',
          updateTime: '2021-03-08 16:19:10'
        },
        {
          id: 36,
          name: 'javascript',
          color: '#E8F8F5',
          createTime: '2021-03-19 16:12:51',
          updateTime: '2021-03-19 16:12:51'
        },
        {
          id: 37,
          name: 'C',
          color: '#F8C471',
          createTime: '2021-08-20 16:15:35',
          updateTime: '2021-08-20 16:15:35'
        },
        {
          id: 38,
          name: 'rabbitmq',
          color: '#F8C471',
          createTime: '2021-09-06 21:40:55',
          updateTime: '2021-09-06 21:40:55'
        }
      ],
      //文章类型选项
      articleType: [
        {
          value: 1,
          label: '原创'
        },
        {
          value: 2,
          label: '转载'
        }
      ],
      //文章分类列表
      categoryList: [
        {
          id: 5,
          name: '优秀转载'
        },
        {
          id: 7,
          name: '学习日记'
        },
        {
          id: 1,
          name: '学习笔记'
        },
        {
          id: 4,
          name: '工具技巧'
        }
      ]
    }
  },

  methods: {
    getCategory() {
      category().then((res) => {
        this.categoryList = res.data
      })
    },
    getTag() {
      tag().then((res) => {
        this.allTagList = res.data
      })
    },
    onSubmit(val) {
      //表单内容验证
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          let param = JSON.parse(JSON.stringify(this.addForm))
          //处理数据

          if (val == 1) {
            param.published = false
          } else {
            param.published = true
          }

          //添加tagList
          param.select.forEach((itemId) => {
            let tag = this.allTagList.find((item) => {
              return item.id == itemId
            })
            param.tagList.push({
              id: tag.id,
              name: tag.name
            })
          })

          //将数字转为字符串
          param.type = param.type + ''
          param.categoryId = param.categoryId + ''
          param.select = param.select.toString()

          param.content = this.$refs.md.d_render
          param['test-editor-markdown-doc'] = param.textContent
          param['test-editor-html-code'] = param.content

          console.log(param)

          //发起请求
          article(param).then((res) => {
            console.log(res)

            if (res.code != 200) {
              return this.$message.error('添加文章失败')
            }

            this.$message.success('添加文章成功')
            this.$router.push('article')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },

  //计算属性
  components: {}
}
</script>

<style lang="less" scoped>
.add {
  padding: 30px;
}
</style>
